﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@section Content{
    <style>
        .panel-default {
            border-radius: 0;
            padding-top: 5px;
        }

        .panel-primary {
            border-top-width: 0;
            border-radius: 0;
            border-color: #ddd;
        }

            .panel-primary > .panel-heading {
                color: #fff;
                border-color: #1ABC9C;
                background-color: #1ABC9C;
            }

        .panel-heading {
            border-radius: 0;
        }

        .nav-tabs > li > a {
            border-radius: 0;
        }
    </style>
    <style>
        .first {
            font-weight: bold;
        }

        .first-node {
            margin-left: 30px;
        }

        .btn-select select option {
            font-weight: bold;
        }

        .btn-select:hover .cur-select {
            background-color: #f90;
        }

        .btn-select select {
            position: absolute;
            top: 0;
            left: 0;
            width: 150px;
            height: 25px;
            opacity: 0;
            filter: alpha(opacity: 0;
            );
            font: 14px/20px "Microsoft YaHei";
            color: #f80;
        }

            .btn-select select option {
                text-indent: 10px;
            }

                .btn-select select option:hover {
                    background-color: #f80;
                    color: #fff;
                }
    </style>
}
<div class="panel panel-default">
    <!-- Nav tabs -->
    <ul id="stateNavTabs" class="nav nav-tabs" role="tablist">
        <li class="active" role="presentation"><a href="#state0" aria-controls="state0" role="tab" data-toggle="tab" style="border-left-width: 0;">销售人员</a></li>
        <li role="presentation"><a href="#state1" aria-controls="state1" role="tab" data-toggle="tab">活动类型</a></li>
        <li role="presentation"><a href="#state2" aria-controls="state2" role="tab" data-toggle="tab">行业类型</a></li>
        <li role="presentation"><a href="#state3" aria-controls="state3" role="tab" data-toggle="tab">场地类型</a></li>

    </ul>
    <!-- Tab panes -->
    <div class="tab-content" style="padding: 10px 10px 0px 10px;">
        @*销售人员*@
        <div role="tabpanel" class="tab-pane state-content active" id="state0">
            <div class="panel panel-default">
                <table class="table table-border table-hover">
                    <thead>
                        <tr>
                            <td colspan="3">
                                <table class="form">
                                    <tr>
                                        <th class="formTitle">展示方式：</th>
                                        <td class="formValue">
                                            <select id="txt_showtype" style="height:25px;width:60%;" name="txt_showtype" class="form-control ">
                                                <option value="1">表格数据</option>
                                                <option value="2">图形数据</option>
                                            </select>
                                        </td>
                                        <th class="formTitle">图形数据：</th>
                                        <td class="formValue">
                                            <select id="txt_acttype" style="height:25px;width:80%;" multiple class="form-control">
                                                <option value="1">柱状图</option>
                                                <option value="2">折线图</option>
                                                <option value="3">饼状图</option>
                                            </select>
                                        </td>
                                        <th class="formTitle">统计维度：</th>
                                        <td class="formValue">
                                            <select id="txt_business_area" style="height:25px;width:80%;" name="txt_business_area" class="form-control">
                                                <option value="1">按时间周期</option>
                                                <option value="2">按销售人员</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">销售人员：</th>
                                        <td class="formValue">
                                            <select id="txt_business_user" style="height:25px;width:80%;" name="txt_business_user" multiple class="form-control"></select>
                                        </td>
                                        <th class="formTitle">年度：</th>
                                        <td class="formValue">
                                            <select id="txt_business_year" style="height:25px;width:70%;" name="txt_business_area" class="form-control"></select>
                                        </td>
                                        <th class="formTitle">月份：</th>
                                        <td class="formValue">
                                            <select id="txt_business_month" style="height:25px;width:80%;" name="txt_business_area" class="form-control">
                                                <option value="0">全部</option>
                                                <option value="1">1月</option>
                                                <option value="2">2月</option>
                                                <option value="3">3月</option>
                                                <option value="4">4月</option>
                                                <option value="5">5月</option>
                                                <option value="6">6月</option>
                                                <option value="7">7月</option>
                                                <option value="8">8月</option>
                                                <option value="9">9月</option>
                                                <option value="10">10月</option>
                                                <option value="11">11月</option>
                                                <option value="12">12月</option>
                                            </select>
                                        </td>

                                    </tr>
                                    <tr>
                                        <th class="formTitle">展现字段：</th>
                                        <td class="formValue" colspan="5">
                                            <select id="txt_districtid" style="width:60%" name="txt_districtid" class="form-control" multiple></select>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td><button id="btn_request" name="btn_request" class="btn btn-primary btn-sm" type="button">查询</button></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="3">
                                <div class="gridPanel">
                                    <table id="gridList"></table>

                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        @*活动类型*@
        <div role="tabpanel" class="tab-pane state-content" id="state1">
            <div class="panel panel-default">
                <table class="table table-border table-hover">
                    <thead>
                        <tr>
                            <td colspan="3">
                                <table class="form">
                                    <tr>
                                        <th class="formTitle">展示方式：</th>
                                        <td class="formValue">
                                            <select id="txt_showtype2" style="height:25px;width:60%;" name="txt_showtype" class="form-control ">
                                                <option value="1">表格数据</option>
                                                <option value="2">图形数据</option>
                                            </select>
                                        </td>
                                        <th class="formTitle">图形数据：</th>
                                        <td class="formValue">
                                            <select id="txt_acttype2" style="height:25px;width:60%;" multiple class="form-control">
                                                <option value="1">柱状图</option>
                                                <option value="2">折线图</option>
                                                <option value="3">饼状图</option>
                                            </select>
                                        </td>
                                        <th class="formTitle">统计维度：</th>
                                        <td class="formValue">
                                            <select id="txt_business_area2" style="height:25px;width:60%;" name="txt_business_area" class="form-control">
                                                <option value="1">按时间周期</option>
                                                <option value="2">按销售人员</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="formTitle">销售人员：</th>
                                        <td class="formValue">
                                            <select id="txt_business_user2" style="height:25px;width:80%;" name="txt_business_user" multiple class="form-control"></select>
                                        </td>
                                        <th class="formTitle">年度：</th>
                                        <td class="formValue">
                                            <select id="txt_business_year2" style="height:25px;width:70%;" name="txt_business_area" class="form-control"></select>
                                        </td>
                                        <th class="formTitle">月份：</th>
                                        <td class="formValue">
                                            <select id="txt_business_month2" style="height:25px;width:80%;" name="txt_business_area" class="form-control">
                                                <option value="0">全部</option>
                                                <option value="1">1月</option>
                                                <option value="2">2月</option>
                                                <option value="3">3月</option>
                                                <option value="4">4月</option>
                                                <option value="5">5月</option>
                                                <option value="6">6月</option>
                                                <option value="7">7月</option>
                                                <option value="8">8月</option>
                                                <option value="9">9月</option>
                                                <option value="10">10月</option>
                                                <option value="11">11月</option>
                                                <option value="12">12月</option>
                                            </select>
                                        </td>

                                    </tr>
                                    <tr>
                                        <th class="formTitle">展现字段：</th>
                                        <td class="formValue" colspan="5">
                                            <select id="txt_districtid2" style="width:60%" name="txt_districtid" class="form-control" multiple></select>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td><button id="btn_request2" name="btn_request" class="btn btn-primary btn-sm" type="button">查询</button></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="3">
                                <div class="gridPanel">
                                    <table id="gridList2"></table>

                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        @*行业类型*@
        <div role="tabpanel" class="tab-pane state-content" id="state2">
            行业类型
        </div>

        @*场地类型*@
        <div role="tabpanel" class="tab-pane state-content" id="state3">
            场地类型
        </div>

    </div>
</div>
<script>

    var vf = {
        $gridList: null,
        userArr: [],
        year: [2012],
        filed: [
            { name: "销售人员", value: "F_RealName" },
            { name: "业绩指标", value: "IndicatorValue" },
            { name: "业绩完成额", value: "OrderIncomeCount" },
            {
                name: "业绩完成率", value: "IndicatorPercent", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["IndicatorValue"] == 0)
                        return (rowObject["OrderIncomeCount"] / 100) + "%";
                    return (rowObject["OrderIncomeCount"] / rowObject["IndicatorValue"] * 100).toFixed(2) + "%";
                }
            },
            {
                name: "业绩差额", value: "IndicatorDifference", formatter: function (cellvalue, options, rowObject) {
                    return rowObject["IndicatorValue"] - rowObject["OrderIncomeCount"];
                }
            },
            {
                name: "利润率指标", value: "", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["IndicatorValue"] == 0)
                        return (rowObject["ProfitValue"] / 100) + "%";
                    return (rowObject["ProfitValue"] / rowObject["IndicatorValue"] * 100).toFixed(2) + "%";
                }
            },
            { name: "利润指标", value: "ProfitValue" },
            { name: "税后利润", value: "ProfitIndicator" },
            {
                name: "利润率", value: "Profit", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["OrderIncomeCount"] == 0)
                        return (rowObject["ProfitIndicator"] / 100) + "%";
                    return (rowObject["ProfitIndicator"] / rowObject["OrderIncomeCount"] * 100).toFixed(2) + "%";
                }
            },
            {
                name: "利润完成率", value: "", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["ProfitValue"] == 0)
                        return (rowObject["Profit"] / 100) + "%";
                    return (rowObject["Profit"] / rowObject["ProfitValue"] * 100).toFixed(2) + "%";
                }
            },
            { name: "需求数", value: "ALLNum" },
            { name: "成交数", value: "FinishNum" },
            { name: "储备量", value: "OtherNum" },
            { name: "关闭数", value: "CloseNum" },
            { name: "扔单数", value: "OldOrderNum", hidden: true },
            {
                name: "需求转化率", value: "ProfitOrder", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["ALLNum"] == 0)
                        return (rowObject["FinishNum"] / 100) + "%";
                    return (rowObject["FinishNum"] / rowObject["ALLNum"] * 100).toFixed(2) + "%";
                }
            },
            { name: "需求额", value: "DemandCash" },
            { name: "需求成交额", value: "FinishCash" },
            {
                name: "需求额转化率", value: "ProfitCash", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["DemandCash"] == 0)
                        return (rowObject["FinishCash"] / 100) + "%";
                    return (rowObject["FinishCash"] / rowObject["DemandCash"] * 100).toFixed(2) + "%";
                }
            },
            {
                name: "关单率", value: "ProfitClose", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["DemandCash"] == 0)
                        return (rowObject["CloseNum"] / 100) + "%";
                    return (rowObject["CloseNum"] / rowObject["DemandCash"] * 100).toFixed(2) + "%";
                }
            },
            {
                name: "扔单率", value: "ProfitOld", formatter: function (cellvalue, options, rowObject) {
                    if (rowObject["DemandCash"] == 0)
                        return (rowObject["OldOrderNum"] / 100) + "%";
                    return (rowObject["OldOrderNum"] / rowObject["DemandCash"] * 100).toFixed(2) + "%";
                }
            },
            { name: "储备客户名称", value: "" },
            { name: "储备客户数", value: "" },
            { name: "储备客户金额", value: "" },
            { name: "储备目标", value: "" },
            { name: "储备差额", value: "" }],
        init: function () {
            vf.load.items();
            vf.load.initcontrol();
            vf.load.control();
            vf.load.initclick();

            vf.InitTable(vf.filed);
        },
        load: {
            items: function () {
                $.ajax({
                    url: "/StatisticalForm/SaleReports/GetItemsJson",
                    data: {},
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        if (data) {
                            vf.userArr = data.User;
                        }
                    }
                });
            },
            control: function () {
                var year = $('#txt_business_year');
                var filed = $("#txt_districtid");
                var users = $('#txt_business_user');
                var acttype = $('#txt_acttype');
                var month = $('#txt_business_month');
                var b = vf.year[0];
                var e = new Date(Date.now()).getFullYear();
                while (b <= e) {
                    if (new Date(Date.now()).getFullYear() == b) {
                        year.append("<option selected='selected' value=" + b + " >" + b + "</option>");
                    }
                    else {
                        year.append("<option value=" + b + " >" + b + "</option>");
                    }
                    b++;
                }
                var fileds = vf.filed;
                var len = fileds.length;
                for (var i = 0; i < len; i++) {
                    filed.append("<option value=" + fileds[i].value + " >" + fileds[i].name + "</option>")
                }

                var userLen = vf.userArr.length;
                for (var i = 0; i < userLen; i++) {
                    users.append("<option value=" + vf.userArr[i].F_Id + ">" + vf.userArr[i].F_RealName + "</option>")
                }
                users.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: true
                });
                filed.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: true
                });
                acttype.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: false
                });
                year.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: false
                });
                month.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: false
                });
            },
            initcontrol: function () {
                var showtype = $('#txt_showtype');
                var acttype = $('#txt_acttype');
                var area = $('#txt_business_area');
                var year = $('#txt_business_year');
                var month = $('#txt_business_month');
                var user = $('#txt_business_user');

                var type_1 = showtype.val();
                var type_2 = area.val();
                if (type_1 == "2") {
                    acttype.prop("disabled", false);
                }
                if (type_1 == "1") {
                    acttype.prop("disabled", true);
                }

                if (type_2 == "1") {
                    user.prop("disabled", true);
                    year.prop("disabled", false);
                    month.prop("disabled", false);
                } else {
                    user.prop("disabled", false);
                    year.prop("disabled", true);
                    month.prop("disabled", true);
                }
            },
            initclick: function () {
                var showtype = $('#txt_showtype');
                var area = $('#txt_business_area');
                var search = $('#btn_request');
                showtype.change(function () {
                    vf.load.initcontrol();
                });
                area.change(function () {
                    vf.load.initcontrol();
                });
                search.click(function () {
                    var showtype = $('#txt_showtype');
                    var acctype = $('#txt_acttype');
                    var districtids = $('#txt_districtid');
                    var users = $('#txt_business_user');
                    var year = $('#txt_business_year');
                    var month = $('#txt_business_month');
                    var fileds = (districtids.val() || []).length == 0 ? vf.filed : vf.InitFiled(districtids.val());

                    var queryJson = JSON.stringify({ Year: year.val(), Month: month.val(), User: users.val() });
                    vf.$gridList.jqGrid('setGridParam', {
                        postData: {
                            queryJson: queryJson
                        },
                    }).trigger('reloadGrid');
                    for (var i = 0; i < vf.filed.length; i++) {
                        vf.$gridList.jqGrid("hideCol", vf.filed[i].value);
                    }
                    for (var i = 0; i < fileds.length; i++) {
                        vf.$gridList.jqGrid("showCol", fileds[i].value);
                    }
                });
            }
        },
        InitFiled: function (filedArr) {
            var arr = [];
            for (var j = 0; j < filedArr.length; j++) {
                for (var i = 0; i < vf.filed.length; i++) {
                    if (filedArr[j] == vf.filed[i].value) {
                        arr.push(vf.filed[i]);
                    }
                }
            }
            return arr;
        },
        InitTable: function (Cloumn, data) {
            $gridList = $("#gridList");
            Cloumn = vf.InitCloumn(Cloumn);
            var year = $('#txt_business_year');
            var month = $('#txt_business_month');
            var postDate = { "Year": year.val(), "Month": month.val() };
            $gridList.dataGrid({
                height: $(window).height() - 120,
                colModel: Cloumn,
                sortorder: "desc",
                viewrecords: true,
                url: "/StatisticalForm/SaleReports/GetReportByUser",
            });
        },
        InitCloumn: function (fileds) {
            var len = fileds.length;
            var Cloumn = [];
            for (var i = 0; i < len; i++) {
                var f = fileds[i];

                if (f.formatter) {
                    Cloumn.push({ label: f.name, name: f.value, width: 80, align: 'left', sortable: false, formatter: f.formatter, hidden: f.hidden });
                } else {
                    Cloumn.push({ label: f.name, name: f.value, width: 80, align: 'left', sortable: false, hidden: f.hidden });
                }
            }
            return Cloumn;
        }
    };


    var vm = {
        $gridList: null,
        filed: [
            { name: "类型名称", value: "F_ItemName" },
            { name: "目录名称", value: "TypeName", hidden: true },
            { name: "需求总数", value: "ALLDemand" },
            { name: "需求来源数量", value: "DemandSource"},
            { name: "成功推荐数量", value: "DemandRecommend" },
            { name: "成功带看数量", value: "DemandTakelook" },
            { name: "成功签约数量", value: "DemandBookRecord" },
            { name: "签约金额", value: "BookRecordMoney" },
            { name: "需求价位范围", value: "DemandCahs" },
            { name: "行业范围", value: "ItemName" },
            { name: "场地类型范围", value: "SiteTypeName" },
            { name: "关闭理由范围", value: "CloseReason" },
        ],
        load: {
            initcontrol: function () {
                var showtype = $('#txt_showtype2');
                var acttype = $('#txt_acttype2');
                var area = $('#txt_business_area2');
                var year = $('#txt_business_year2');
                var month = $('#txt_business_month2');
                var user = $('#txt_business_user2');

                var type_1 = showtype.val();
                var type_2 = area.val();
                if (type_1 == "2") {
                    acttype.prop("disabled", false);
                }
                if (type_1 == "1") {
                    acttype.prop("disabled", true);
                }

                if (type_2 == "1") {
                    user.prop("disabled", true);
                    year.prop("disabled", false);
                    month.prop("disabled", false);
                } else {
                    user.prop("disabled", false);
                    year.prop("disabled", true);
                    month.prop("disabled", true);
                }
            },
            control: function () {
                var year = $('#txt_business_year2');
                var filed = $("#txt_districtid2");
                var users = $('#txt_business_user2');
                var acttype = $('#txt_acttype2');
                var month = $('#txt_business_month2');
                var b = vf.year[0];
                var e = new Date(Date.now()).getFullYear();
                while (b <= e) {
                    if (new Date(Date.now()).getFullYear() == b) {
                        year.append("<option selected='selected' value=" + b + " >" + b + "</option>");
                    }
                    else {
                        year.append("<option value=" + b + " >" + b + "</option>");
                    }
                    b++;
                }
                var fileds = vf.filed;
                var len = fileds.length;
                for (var i = 0; i < len; i++) {
                    filed.append("<option value=" + fileds[i].value + " >" + fileds[i].name + "</option>")
                }

                var userLen = vf.userArr.length;
                for (var i = 0; i < userLen; i++) {
                    users.append("<option value=" + vf.userArr[i].F_Id + ">" + vf.userArr[i].F_RealName + "</option>")
                }
                users.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: true
                });
                filed.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: true
                });
                acttype.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: false
                });
                year.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: false
                });
                month.bindSelect({
                    placeholder: "请选择相关内容",
                    multiple: false
                });
            },
            initclick: function () {
                var showtype = $('#txt_showtype2');
                var area = $('#txt_business_area2');
                var search = $('#btn_request2');
                showtype.change(function () {
                    vm.load.initcontrol();
                });
                area.change(function () {
                    vm.load.initcontrol();
                });
                search.click(function () {
                    var showtype = $('#txt_showtype');
                    var acctype = $('#txt_acttype');
                    var districtids = $('#txt_districtid');
                    var users = $('#txt_business_user');
                    var year = $('#txt_business_year');
                    var month = $('#txt_business_month');
                    var fileds = (districtids.val() || []).length == 0 ? vf.filed : vf.InitFiled(districtids.val());

                    var queryJson = JSON.stringify({ Year: year.val(), Month: month.val(), User: users.val() });
                    vm.$gridList.jqGrid('setGridParam', {
                        postData: {
                            queryJson: queryJson
                        },
                    }).trigger('reloadGrid');
                    for (var i = 0; i < vf.filed.length; i++) {
                        vm.$gridList.jqGrid("hideCol", vf.filed[i].value);
                    }
                    for (var i = 0; i < fileds.length; i++) {
                        vm.$gridList.jqGrid("showCol", fileds[i].value);
                    }
                });
            }
        },
        init: function () {
          
            vm.load.initcontrol();
            vm.load.control();
            vm.load.initclick();

            vm.InitTable(vf.filed);
        },
        InitTable: function (Cloumn, data) {
            $gridList = $("#gridList2");
            Cloumn = vf.InitCloumn(Cloumn);
            var year = $('#txt_business_year2');
            var month = $('#txt_business_month2');
            var postDate = { "Year": year.val(), "Month": month.val() };
            $gridList.dataGrid({
                height: $(window).height() - 120,
                colModel: Cloumn,
                sortorder: "desc",
                viewrecords: true,
                url: "/StatisticalForm/SaleReports/GetReportByUser",
            });
        },
        InitFiled: function (filedArr) {
            var arr = [];
            for (var j = 0; j < filedArr.length; j++) {
                for (var i = 0; i < vf.filed.length; i++) {
                    if (filedArr[j] == vm.filed[i].value) {
                        arr.push(vm.filed[i]);
                    }
                }
            }
            return arr;
        },
        InitCloumn: function (fileds) {
            var len = fileds.length;
            var Cloumn = [];
            for (var i = 0; i < len; i++) {
                var f = fileds[i];

                if (f.formatter) {
                    Cloumn.push({ label: f.name, name: f.value, width: 80, align: 'left', sortable: false, formatter: f.formatter, hidden: f.hidden });
                } else {
                    Cloumn.push({ label: f.name, name: f.value, width: 80, align: 'left', sortable: false, hidden: f.hidden });
                }
            }
            return Cloumn;
        }
    };
    $(vf.init);
    $(vm.init);
</script>


